<template>
	<div>
		<el-breadcrumb separator="/">
		  <el-breadcrumb-item>系统管理</el-breadcrumb-item>
		  <el-breadcrumb-item :to="{ path: '/account' }">账户管理</el-breadcrumb-item>
		</el-breadcrumb>
		<h2>账户管理</h2>
		<el-table
		    :data="tableData"
		    border>
		    <el-table-column
		      prop="date"
		      label="日期"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="name"
		      label="姓名"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="address"
		      label="地址">
		    </el-table-column>
		    <el-table-column label="操作">
			    <template scope="scope">
				    <el-button size="small" type="primary" @click="look(scope.row.id)">查看</el-button>
					<el-button size="small" @click="put(scope.row.id)">编辑</el-button>
					<el-button size="small" type="danger" @click="del(scope.$index)">删除</el-button>
				</template>
			</el-table-column>
		  </el-table>
	</div>
</template>
<script>
	export default {
		data() {
	      return {
	        tableData: [{
	          date: '2017-05-02',
	          name: '王阳明',
	          address: '贵州龙场驿',
	          id: '1'
	        }, {
	          date: '2017-05-04',
	          name: '王阳明',
	          address: '贵州龙场驿',
	          id: '2'
	        }, {
	          date: '2017-05-01',
	          name: '王阳明',
	          address: '贵州龙场驿',
	          id: '3'
	        }, {
	          date: '2017-05-03',
	          name: '王阳明',
	          address: '贵州龙场驿',
	          id: '4'
	        }]
	      }
	    },
	    methods: {
	    	look(id) {
	    		this.$router.push({
	    			name: 'account-detail',
	    			params: {
	    				id: id
	    			}
	    		})
	    	},
	    	put(id) {
	    		this.$router.push({
	    			name: 'account-edit',
	    			params: {
	    				id: id
	    			}
	    		})
	    	},
	    	del(index) {
	    		console.log(index);
		        this.$confirm('确认删除?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		        	this.tableData.splice(index, 1);
					this.$message({
			        	type: 'success',
			        	message: '删除成功!'
			        });
		        }).catch(() => {
			          this.$message({
			            type: 'info',
			            message: '已取消删除'
			          });          
		        });
		    }
	    }
	}
</script>
<style>
	@import '../../css/style.css';
</style>